<template>
  <div class="navMenu flex">
    <img src="https://www.gotopku.cn/public/default/images/logo.jpg">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1">首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">招生信息</template>
        <el-menu-item index="2-1">通知公告</el-menu-item>
        <el-menu-item index="2-2">招生新闻</el-menu-item>
        <el-menu-item index="2-3">招生时间表</el-menu-item>
        <el-menu-item index="2-4">历年招生计划</el-menu-item>
        <el-menu-item index="2-5">历年分数线</el-menu-item>
        <el-menu-item index="2-6">报考必读</el-menu-item>
      </el-submenu>
      <el-menu-item index="3">网上报名</el-menu-item>
      <el-menu-item index="4">学科专业</el-menu-item>
      <el-menu-item index="5">走进北大</el-menu-item>
      <el-submenu index="6">
        <template slot="title">奖助学金</template>
        <el-menu-item index="6-1">所有奖学金</el-menu-item>
        <el-menu-item index="6-2">新生奖学金</el-menu-item>
        <el-menu-item index="6-3">申请流程</el-menu-item>
        <el-menu-item index="6-4">在线申请</el-menu-item>
        <el-menu-item index="6-5">助学金</el-menu-item>
      </el-submenu>
      <el-submenu index="7">
        <template slot="title">来访信息</template>
        <el-menu-item index="7-1">开放日</el-menu-item>
        <el-menu-item index="7-2">团队来访</el-menu-item>
        <el-menu-item index="7-3">个人来访</el-menu-item>
        <el-menu-item index="7-4">地图</el-menu-item>
        <el-menu-item index="7-5">联系我们</el-menu-item>
      </el-submenu>
      <el-menu-item index="8">医学部</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import Vue from 'vue';
import {Menu, MenuItem, Submenu} from 'element-ui';

Vue.use(Menu);
Vue.use(MenuItem);
Vue.use(Submenu);
export default {
  name: "navMenu",
  data() {
    return {
      activeIndex: '1'
    }
  }
}
</script>

<style scoped>
.navMenu {
  width: 1200px;
  margin: 50px auto;
}
</style>